<template>
  <div
    class="desktop no-touch body--light"
    style="
      --q-primary: #1976d2;
      --q-primary-opacity-middle: #1976d226;
      --q-primary-opacity-low: #1976d20d;
      --order-buy: #41abff;
      --order-sell: #ff5662;
      height: 100%;
    "
  >
    <div id="q-app" style="height: 100%">
      <div
        class="q-layout q-layout--standard"
        style="min-height: 860px; height: 100%"
      >
        <div class="q-page-container" style="height: 100%">
          <main
            class="q-page no-scroll"
            style="
              height: 100%;
              min-height: 860px;
              background: rgba(0, 0, 0, 0.4);
            "
          >
            <div class="q-img q-img--menu absolute fit" style="z-index: -1">
              <div class="q-img__container absolute-full">
                <img
                  class="q-img__image q-img__image--with-transition q-img__image--loaded"
                  src="@/assets/images/background.png"
                  style="object-fit: cover; object-position: 50% 50%"
                >
              </div>
            </div>
            <section
              class="absolute fit row justify-center items-center scroll"
            >
              <div class="col-10 row" style="height: 830px; max-width: 1280px">
                <div class="col-5 column text-white">
                  <section class="col column">
                    <div class="col-auto">
                      <div class="text-h4 text-bold">{{ t.h1 }}</div>
                      <div class="text-h6 text-bold q-mt-sm">
                        {{ t.h2 }}
                      </div>
                    </div>

                    <div
                      class="q-scrollarea q-scrollarea--dark col q-mt-md"
                      style="word-break: break-word"
                    />
                    <div class="col-auto">
                      <div class="q-mt-lg" style="border-radius: 5px">
                        <div
                          class="row justify-between items-center q-pa-md text-white rounded-borders ads-bg-color"
                        >
                          <div class="col text-lg q-pr-md">
                            <div>{{ t.h3 }}</div>
                            <div class="text-md">
                              {{ t.h4 }}
                            </div>
                          </div>
                          <button
                            class="q-btn q-btn-item non-selectable no-outline q-btn--outline q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--dense col-auto q-my-sm q-px-sm btn-width"
                            type="button"
                          >
                            <span class="q-focus-helper" /><span
                              class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
                            ><span class="block">{{ t.h5 }}</span></span>
                          </button>
                        </div>
                      </div>
                      <div class="row q-mt-lg text-sm">
                        <div>{{ t.h6 }}</div>
                        <div
                          class="q-scrollarea"
                          style="height: 55px; width: 100%"
                        >
                          {{ t.h7 }}
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div class="col-2" />
                <div class="col-5">
                  <div
                    class="q-card column no-wrap full-height comp-bg-color"
                    style="padding: 32px"
                  >
                    <header class="text-center">
                      <div class="q-img q-img--menu" style="height: 60px">
                        <div class="q-img__container absolute-full">
                          <img
                            class="q-img__image q-img__image--with-transition q-img__image--loaded"
                            height="0"
                            src="@/assets/images/logo1.png"
                            style="
                              object-fit: contain;
                              object-position: 50% 50%;
                            "
                          >
                        </div>
                      </div>
                      <div class="q-mt-sm text-primary">
                        {{ t.h8 }}
                      </div>
                    </header>
                    <main class="text-middle-grey" style="flex: 1 1 0%">
                      <form>
                        <div class="q-py-lg" />
                        <div class="q-pb-sm">{{ t.h9 }}</div>
                        <div
                          :class="`q-field row no-wrap items-start q-field--outlined q-input q-field--dense q-field--error ${usernameStyle1} q-field--with-bottom q-pb-lg`"
                        >
                          <div
                            class="q-field__inner relative-position col self-stretch"
                          >
                            <div
                              class="q-field__control relative-position row no-wrap "
                              :class="usernameStyle"
                            >
                              <div
                                class="q-field__control-container col relative-position row no-wrap q-anchor--skip"
                              >
                                <input
                                  ref="textInput"
                                  v-model="loginForm.username"
                                  class="q-field__native q-placeholder"
                                  type="text"
                                  @blur="inputBlur1"
                                >
                              </div>
                              <div
                                class="q-field__append q-field__marginal row no-wrap items-center"
                                @click="textIconVisibility"
                              >
                                <img
                                  v-if="textIconStatus"
                                  class="q-icon notranslate material-icons cursor-pointer"
                                  style="width: 24px"
                                  src="@/assets/images/icon1.png"
                                >
                              </div>
                            </div>
                            <div
                              class="q-field__bottom row items-start q-field__bottom--animated"
                            >
                              <div class="q-field__messages col" />
                            </div>
                          </div>
                        </div>
                        <div class="q-pb-sm">{{ t.h10 }}</div>
                        <div
                          :class="`q-field row no-wrap items-start q-field--outlined q-input q-field--dense ${passwordStyle1} q-field--with-bottom`"
                        >
                          <div
                            class="q-field__inner relative-position col self-stretch"
                          >
                            <div
                              class="q-field__control relative-position row no-wrap"
                              :class="passwordStyle"
                            >
                              <div
                                class="q-field__control-container col relative-position row no-wrap q-anchor--skip"
                              >
                                <input
                                  ref="passwordInput"
                                  v-model="loginForm.password"
                                  class="q-field__native q-placeholder"
                                  :type="passwordFieldType"
                                  @blur="inputBlur2"
                                >
                              </div>
                              <div
                                class="q-field__append q-field__marginal row no-wrap items-center"
                              >
                                <img
                                  v-if="passwordIconStatus"
                                  class="q-icon notranslate material-icons cursor-pointer"
                                  style="width: 24px"
                                  src="@/assets/images/icon1.png"
                                  @click="passwordVisibility"
                                >
                                <img
                                  class="q-icon notranslate material-icons cursor-pointer"
                                  style="width: 24px"
                                  :src="currentImage"
                                  @click="togglePasswordIcon"
                                >
                              </div>
                            </div>
                            <div
                              class="q-field__bottom row items-start q-field__bottom--animated"
                            >
                              <div class="q-field__messages col" />
                            </div>
                          </div>
                        </div>
                        <div class="text-right">
                          <button
                            class="q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-pa-none text-blue-8"
                            type="button"
                          >
                            <span class="q-focus-helper" /><span
                              class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
                            ><span class="block">{{ t.h11 }}</span></span>
                          </button>
                        </div>
                        <div
                          class="q-mt-md text-center text-red"
                          style="min-height: 21px"
                        >
                          {{ tip }}
                        </div>
                        <div class="q-mt-md">
                          <div
                            class="q-checkbox cursor-pointer no-outline row inline no-wrap items-center"
                            @click="handleDialogShow"
                          >
                            <div
                              class="q-checkbox__inner relative-position non-selectable q-checkbox__inner--falsy"
                              :class="selectedStatus"
                            >
                              <div class="q-checkbox__bg absolute">
                                <svg
                                  class="q-checkbox__svg fit absolute-full"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    class="q-checkbox__truthy"
                                    fill="none"
                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"
                                  />
                                  <path
                                    class="q-checkbox__indet"
                                    d="M4,14H20V10H4"
                                  />
                                </svg>
                              </div>
                            </div>

                            <div class="q-checkbox__label q-anchor--skip">
                              {{ t.h12 }}
                            </div>
                          </div>
                          <span
                            class="text-blue-8 cursor-pointer"
                            @click="handleDialogShow"
                          >{{ t.h121 }}</span>
                        </div>
                        <button
                          class="q-btn q-btn-item non-selectable no-outline q-btn--unelevated q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable q-mt-xs full-width"
                          type="button"
                          @click="handleLogin"
                        >
                          <span class="q-focus-helper" /><span
                            class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
                          ><span class="block">{{ t.h13 }}</span></span>
                        </button>
                      </form>
                    </main>

                    <footer class="q-mt-md text-middle-grey text-md">
                      <div class="row">
                        <div @click="selectLanguage('zh-tw')" :class="{'text-primary': selectedLanguage === 'zh-tw', 'cursor-pointer': selectedLanguage !== 'zh-tw'}">
                          <div>
                            <span>繁體中文</span><span class="q-px-md">|</span>
                          </div>
                        </div>
                        <div @click="selectLanguage('zh-cn')" :class="{'text-primary': selectedLanguage === 'zh-cn', 'cursor-pointer': selectedLanguage !== 'zh-cn'}">
                          <div>
                            <span>简体中文</span><span class="q-px-md">|</span>
                          </div>
                        </div>
                        <div @click="selectLanguage('en')" :class="{'text-primary': selectedLanguage === 'en', 'cursor-pointer': selectedLanguage !== 'en'}">
                          <div>
                            <span>English</span>
                          </div>
                        </div>
                      </div>
                      <div
                        class="text-sm text-middle-grey q-pt-sm"
                        style="color: rgb(153, 153, 153)"
                      >
                        <div>
                          <span>{{ t.h14 }}: 852-25613008</span>&nbsp;|
                          <span>{{ t.h15 }}:852-25613008</span><br>
                          <span>{{ t.h151 }}:info@chinasoutherngroup.net</span>
                        </div>
                        <div>{{ t.h16 }}: 1.1.4-8221</div>
                        <div>
                          © 2024 {{ t.h17 }}
                          <span
                            class="text-blue-8 cursor-pointer"
                          >{{ t.h18 }}</span>
                          |
                          <span
                            class="text-blue-8 cursor-pointer"
                          >{{ t.h19 }}</span>
                          |
                          <span
                            class="text-blue-8 cursor-pointer"
                          >{{ t.h20 }}</span>
                        </div>
                      </div>
                    </footer>
                  </div>
                </div>
              </div>
            </section>
          </main>
        </div>
      </div>
    </div>
    <div
      class="q-dialog no-pointer-events q-dialog--modal"
      :class="dialogClassActive"
    >
      <div
        class="q-dialog__backdrop fixed-full q-transition--fade-leave-active"
        style="--q-transition-duration: 300ms"
        :class="dialogClassActive1"
      />
      <div
        class="q-dialog__inner flex no-pointer-events q-dialog__inner--minimized q-dialog__inner--standard fixed-full flex-center q-transition--scale-leave-active"
        style="--q-transition-duration: 300ms"
        :class="dialogClassActive2"
      >
        <div class="full-width" source="login">
          <div class="q-card">
            <div class="q-card__section q-card__section--vert">
              <div class="row">
                <div class="col text-h6 text-bold">{{ t.h21 }}</div>
                <img
                  class="q-icon notranslate material-icons col-auto cursor-pointer"
                  src="@/assets/images/icon4.png"
                  @click="handleDisagree"
                >
              </div>
              <div class="q-my-sm text-right text-blue-8">
                <span class="cursor-pointer" v-if="selectedLanguage === 'zh-tw' && dialogSelectedLanguage === 'en'"  @click="handleChangeLangange('zh-tw')">
                  繁体中文
                </span>
                <span class="cursor-pointer" v-if="selectedLanguage === 'zh-cn' && dialogSelectedLanguage === 'en'" @click="handleChangeLangange('zh-cn')">
                  简体中文
                </span>
                <span class="cursor-pointer"  v-if="dialogSelectedLanguage !== 'en' && selectedLanguage !== 'en'" @click="handleChangeLangange('en')"> English </span>
              </div>
              <div class="borderline">
                <div class="q-scrollarea" style="height: 50vh">
                  <div
                    class="q-scrollarea__container scroll relative-position fit hide-scrollbar"
                  >
                    <div class="q-scrollarea__content absolute">
                      <div class="q-pa-md">
                        <div>
                          <div>
                            {{ t.h22 }}
                          </div>
                          <br>
                          <div>
                            {{ t.h23 }}
                          </div>
                          <br>
                          <div>
                            {{ t.h24 }}
                          </div>
                          <br>
                          <div>
                            {{ t.h25 }}
                          </div>
                          <br>
                          <div>
                            {{ t.h26 }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="q-mt-sm">
                <div
                  class="q-checkbox cursor-pointer no-outline row inline no-wrap items-center q-checkbox--dense q-mr-sm"
                  @click="handleDialogSelected"
                >
                  <div
                    class="q-checkbox__inner relative-position non-selectable q-checkbox__inner--falsy"
                    :class="dialogSelectedStatus"
                  >
                    <div class="q-checkbox__bg absolute">
                      <svg
                        class="q-checkbox__svg fit absolute-full"
                        viewBox="0 0 24 24"
                      >
                        <path
                          class="q-checkbox__truthy"
                          fill="none"
                          d="M1.73,12.91 8.1,19.28 22.79,4.59"
                        />
                        <path class="q-checkbox__indet" d="M4,14H20V10H4" />
                      </svg>
                    </div>
                  </div>

                  <div class="q-checkbox__label q-anchor--skip">
                    {{ t.h27 }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="q-card__actions justify-start q-card__actions--horiz row row justify-end"
            >
              <button
                class="q-btn q-btn-item non-selectable no-outline q-btn--outline q-btn--rectangle text-primary q-btn--actionable q-focusable q-hoverable q-mx-md q-mb-md"
                type="button"
              >
                <span class="q-focus-helper" /><span
                  class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
                  @click="handleDisagree"
                >{{ t.h28 }}</span></button><button
                class="q-btn q-btn-item non-selectable no-outline q-btn--unelevated q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable q-mx-md q-mb-md"
                type="button"
              >
                <span class="q-focus-helper" /><span
                  class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
                  @click="handleAgree"
                >{{ t.h29 }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: 'Login',
  data() {
    return {
      dialogClassActive: '',
      dialogClassActive1: 'q-transition--fade-leave-to',
      dialogClassActive2: 'q-transition--scale-leave-to',
      dialogSelectedStatus: '',
      selectedStatus: '',
      // 密码
      passwordIcon: '',
      passwordFieldType: 'password',
      currentImage: require('@/assets/images/icon2.png'),
      icon2: require('@/assets/images/icon2.png'),
      icon3: require('@/assets/images/icon3.png'),
      // 提示语
      tip: '',
      usernameStyle: '',
      usernameStyle1: 'q-field--highlighted',
      passwordStyle: '',
      passwordStyle1: '',
      // 语种
      selectedLanguage: 'zh-cn', // 默认选中的语言
      dialogSelectedLanguage: '',
      translations: {
        'zh-cn': {
          h1: '中衍国际金融服务有限公司',
          h2: '欢迎来到Portal2网上交易平台',
          h3: '中衍国际CSIL',
          h4: '崭新版本：时款风格，带来属于新世代的APP体验。更高效，更方便，更安全的落盘体验。各种新功能，由您登入一刻，即可体验。',
          h5: '立即下载',
          h6: '重要讯息：',
          h7: '为减低客户网上交易帐户被非法登入和引起金钱损失的威胁，Portal2 用户请定时更改登入帐户密码。如有疑问，请即联络客户服务或技术支援跟进。谢谢。',
          h8: '证监会中央编号 : BJF033',
          h9: '登录账户',
          h10: '登录密码',
          h11: '忘记密码',
          h12: '我已阅读并同意',
          h121: '《免责声明》',
          h13: '登录',
          h14: '交易热线',
          h15: '客服热线',
          h151: '客服电邮',
          h16: '版本号码',
          h17: '中衍国际金融服务有限公司',
          h18: '免责声明及风险披露',
          h19: '隐私声明',
          h20: '清理缓存',
          h21: '免责声明',
          h22: '  本人明白证券价格起伏无常，任何个别证券的变动也随时有不断下挫的可能性，假若情况更甚，其价值更有可能变得毫无价值。买卖证券，必定也有亏多盈少的风险存在。',
          h23: '  假如本人发现被窃用登入密码，会尽速通知贵公司，并且愿意承担一切与此相关的风险后果，假如贵公司要求本人对于上述后果做成贵公司相关之损失、讼费、赔偿、开支或申索作出弥偿，本人愿意承担一切责任。',
          h24: '  本人同意在给予贵公司指示前审阅有关每一项指示，并谨此承诺本人的登记资料真确无误，本人亦愿意在贵公司要求下承担有关补偿责任，包括贵公司可能因依赖本人透过本网站或与本网站的每一指示所提供的资料引致贵公司任何损失、讼费、赔偿、开支或被申索赔偿。',
          h25: '  本人确认及使知道已经阅遍上文及明白此风险披露声明之全部内容，谨此声明本人愿意承担上述彼露的所有风险。',
          h26: '  注意：以上中文译本仅供参考，如与英文原文有任何差异，一概以英文版本为准。',
          h27: '我已阅读并明白免责声明之全部内容',
          h28: '不同意',
          h29: '同意'
        },
        'zh-tw': {
          h1: '中衍國際金融服務有限公司',
          h2: '歡迎來到Portal2網上交易平台',
          h3: '中衍國際CSIL',
          h4: '嶄新版本：時款風格，帶來屬於新世代的APP體驗。更高效，更方便，更安全的落槃體驗。各種新功能，由您登入一刻，即可體驗。',
          h5: '立即下載',
          h6: '重要訊息：',
          h7: '為減低客戶網上交易帳戶被非法登入和引起金錢損失的威脅，Portal2 用戶請定時更改登入帳戶密碼。如有疑問，請即聯絡客戶服務或技術支援跟進。謝謝。',
          h8: '證監會中央編號 : BJF033',
          h9: '登錄賬戶',
          h10: '登錄密碼',
          h11: '忘記密碼',
          h12: '我已閱讀並同意',
          h121: '《免責聲明》',
          h13: '登錄',
          h14: '交易熱線',
          h15: '客服熱線',
          h151: '客服電郵',
          h16: '版本號碼',
          h17: '中衍國際金融服務有限公司',
          h18: '免責聲明及風險披露',
          h19: '隱私聲明',
          h20: '清理緩存',
          h21: '免責聲明',
          h22: '  本人明白證券價格起伏無常，任何個別證券的變動也隨時有不斷下挫的可能性，假若情況更甚，其價值更有可能變得毫無價值。買賣證券，必定也有虧多盈少的風險存在。',
          h23: '  假如本人發現被竊用登入密碼，會盡速通知貴公司，並且願意承擔一切與此相關的風險後果，假如貴公司要求本人對於上述後果做成貴公司相關之損失、訟費、賠償、開支或申索作出彌償，本人願意承擔一切責任。',
          h24: '  本人同意在給予貴公司指示前審閱有關每一項指示，並謹此承諾本人的登記資料真確無誤，本人亦願意在貴公司要求下承擔有關補償責任，包括貴公司可能因依賴本人透過本網站或與本網站的每一指示所提供的資料引致貴公司任何損失、訟費、賠償、開支或被申索賠償。 ',
          h25: '  本人確認及使知道已經閱遍上文及明白此風險披露聲明之全部內容，謹此聲明本人願意承擔上述彼露的所有風險。',
          h26: '  注意：以上中文譯本謹供參考，如與英文原文有任何差異，一概以英文版本為準。',
          h27: '我已閱讀並明白免責聲明之全部內容',
          h28: '不同意',
          h29: '同意'
        },
        'en': {
          h1: 'Zhongyan International Financial Services Limited',
          h2: 'Welcome to Portal2 Online Trading Platform',
          h3: '中衍國際CSIL',
          h4: 'Revamped Version: modern look, modern experience. More efficient, more convenient, more secure trading experience provided. Log in now and experience all the new features!',
          h5: 'download',
          h6: 'Important Notes:',
          h7: 'To reduce the threat of unauthorized access of user login ID, and suffering from financial loss, Portal2 users are highly recommended to update login password in a regular basis.',
          h8: 'CE Number : BJF033',
          h9: 'Login ID',
          h10: 'Login Password',
          h11: 'Forgot Password',
          h12: 'I have read and agreed',
          h121: '《Disclaimer》',
          h13: 'Login',
          h14: 'Transaction Hotline',
          h15: 'Customer Service Hotline',
          h151: 'Customer Service Email',
          h16: 'Version Number',
          h17: 'Zhongyan International Financial Services Limited',
          h18: 'Disclaimer & Risk Disclosure',
          h19: 'Privacy',
          h20: 'Clear Cache',
          h21: 'Disclaimer',
          h22: '  I understand that the price of securities can and does fluctuate, and that any individual security may experience downward movements, and may under some circumstances even become valueless. There is an inherent risk that losses may be incurred rather than profit made, as a result of buying and selling securities.',
          h23: '  If there is any unauthorized use of my login password, I shall notify you immediately, and I agree that I shall bear all risks in connection with any unauthorized use of my login password and I shall indemnify and keep you indemnified on demand against any losses, costs, damages, expenses or claims which you may suffer as a result of any unauthorized use of my login password.',
          h24: '  I hereby agree to review every instruction before instructing you and confirm that all information supplied by me in connection with these instructions to be true and correct. I further agree to indemnify and keep you indemnified on demand against any losses, damages, costs, expenses or claims, which you may suffer arising from your reliance on any of the information I have provided therefore or in connection with this internet services.',
          h25: '  I confirm I have read and acknowledge that I understand the contents of the Risk Disclosure Statement above, and agree to accept the risks stated therein.',
          h26: '',
          h27: 'I have read and understood the entire content of Disclaimer',
          h28: 'DISAGREE',
          h29: 'AGREE'
        }
      },
      t: {
          h1: '中衍国际金融服务有限公司',
          h2: '欢迎来到Portal2网上交易平台',
          h3: '中衍国际CSIL',
          h4: '崭新版本：时款风格，带来属于新世代的APP体验。更高效，更方便，更安全的落盘体验。各种新功能，由您登入一刻，即可体验。',
          h5: '立即下载',
          h6: '重要讯息：',
          h7: '为减低客户网上交易帐户被非法登入和引起金钱损失的威胁，Portal2 用户请定时更改登入帐户密码。如有疑问，请即联络客户服务或技术支援跟进。谢谢。',
          h8: '证监会中央编号 : BJF033',
          h9: '登录账户',
          h10: '登录密码',
          h11: '忘记密码',
          h12: '我已阅读并同意',
          h121: '《免责声明》',
          h13: '登录',
          h14: '交易热线',
          h15: '客服热线',
          h151: '客服电邮',
          h16: '版本号码',
          h17: '中衍国际金融服务有限公司',
          h18: '免责声明及风险披露',
          h19: '隐私声明',
          h20: '清理缓存',
          h21: '免责声明',
          h22: '  本人明白证券价格起伏无常，任何个别证券的变动也随时有不断下挫的可能性，假若情况更甚，其价值更有可能变得毫无价值。买卖证券，必定也有亏多盈少的风险存在。',
          h23: '  假如本人发现被窃用登入密码，会尽速通知贵公司，并且愿意承担一切与此相关的风险后果，假如贵公司要求本人对于上述后果做成贵公司相关之损失、讼费、赔偿、开支或申索作出弥偿，本人愿意承担一切责任。',
          h24: '  本人同意在给予贵公司指示前审阅有关每一项指示，并谨此承诺本人的登记资料真确无误，本人亦愿意在贵公司要求下承担有关补偿责任，包括贵公司可能因依赖本人透过本网站或与本网站的每一指示所提供的资料引致贵公司任何损失、讼费、赔偿、开支或被申索赔偿。',
          h25: '  本人确认及使知道已经阅遍上文及明白此风险披露声明之全部内容，谨此声明本人愿意承担上述彼露的所有风险。',
          h26: '  注意：以上中文译本仅供参考，如与英文原文有任何差异，一概以英文版本为准。',
          h27: '我已阅读并明白免责声明之全部内容',
          h28: '不同意',
          h29: '同意'
      },
      codeUrl: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入您的账号' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' }
        ],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined
    }
  },
  computed: {
    // 登录账户状态,图标控制
    textIconStatus() {
      return this.loginForm.username.length > 0
    },
    passwordIconStatus() {
      return this.loginForm.password.length > 0
    },

  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },

  },
  created() {
    // this.getCode();
    this.getCookie()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.textInput.focus()
    })
  },
  methods: {
    textIconVisibility() {
      this.loginForm.username = ''
      this.usernameStyle = 'text-negative'
      this.usernameStyle1 = 'q-field--highlighted'
    },
    passwordVisibility() {
      this.loginForm.password = ''
      this.passwordStyle = 'text-negative'
      this.passwordStyle1 = 'q-field--highlighted'
    },
    togglePasswordIcon() {
      if (this.currentImage === this.icon2) {
        this.currentImage = this.icon3
        this.passwordFieldType = 'text'
      } else {
        this.currentImage = this.icon2
        this.passwordFieldType = 'password'
      }
    },
    inputBlur1(){
      if(this.loginForm.username === ''){
        this.usernameStyle = 'text-negative'
        this.usernameStyle1 = 'q-field--highlighted'
      } else {
        this.usernameStyle = ''
        this.usernameStyle1 = ''
      }

    },
    inputBlur2(){
      if(this.loginForm.password === ''){
        this.passwordStyle = 'text-negative'
        this.passwordStyle1 = 'q-field--highlighted'
      } else {
        this.passwordStyle = ''
        this.passwordStyle1 = ''
      }

    },
    selectLanguage(language) {
      this.selectedLanguage = language; // 更新选中的语言
      Object.assign(this.t, this.translations[language])
    },

    // 免责声明弹层
    handleDialogShow() {
      if (!this.selectedStatus) {
        this.dialogClassActive = 'fullscreen'
        this.dialogClassActive1 = ''
        this.dialogClassActive2 = ''
      } else {
        this.selectedStatus = ''
        this.dialogSelectedStatus = ''
      }
    },
    // 关闭免责声明弹层
    handleDialogClose() {
      this.dialogClassActive = ''
      this.dialogClassActive1 = 'q-transition--fade-leave-to'
      this.dialogClassActive2 = 'q-transition--scale-leave-to'
      this.t.h22 = this.translations[this.selectedLanguage].h22
      this.t.h23 = this.translations[this.selectedLanguage].h23
      this.t.h24 = this.translations[this.selectedLanguage].h24
      this.t.h25 = this.translations[this.selectedLanguage].h25
      this.t.h26 = this.translations[this.selectedLanguage].h26
      this.dialogSelectedLanguage = ''
    },
    // 已阅事件
    handleDialogSelected() {
      if (!this.dialogSelectedStatus) {
        this.dialogSelectedStatus = 'q-checkbox__inner--truthy'
      } else {
        this.dialogSelectedStatus = ''
      }
    },
    // 不同意事件
    handleDisagree() {
      this.handleDialogClose()
      this.dialogSelectedStatus = ''
    },
    // 同意事件
    handleAgree() {
      if (this.dialogSelectedStatus) {
        this.handleDialogClose()
        this.selectedStatus = 'q-checkbox__inner--truthy'
        this.tip = ''
      } else {
      }
    },
    // 弹层语言切换
    handleChangeLangange(language) {
      this.dialogSelectedLanguage = language
      if (language === 'en') {
        this.t.h22 = this.translations[language].h22
        this.t.h23 = this.translations[language].h23
        this.t.h24 = this.translations[language].h24
        this.t.h25 = this.translations[language].h25
        this.t.h26 = this.translations[language].h26
      } else {
        this.t.h22 = this.translations[this.selectedLanguage].h22
        this.t.h23 = this.translations[this.selectedLanguage].h23
        this.t.h24 = this.translations[this.selectedLanguage].h24
        this.t.h25 = this.translations[this.selectedLanguage].h25
        this.t.h26 = this.translations[this.selectedLanguage].h26
      }
    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.loginForm.uuid = res.uuid
        }
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        return
      }
      if (!this.selectedStatus) {
        this.tip = '请勾选同意条款 '
        return
      }
      if (this.loginForm.rememberMe) {
        Cookies.set('username', this.loginForm.username, { expires: 30 })
        Cookies.set('password', encrypt(this.loginForm.password), {
          expires: 30
        })
        Cookies.set('rememberMe', this.loginForm.rememberMe, {
          expires: 30
        })
      } else {
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }
      this.$store
        .dispatch('Login', this.loginForm)
        .then(() => {
          this.$router.push('/screen').catch(() => {})
        })
        .catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "@/assets/styles/login.scss";

.login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  //background-image: url("../assets/images/background.png");
  background-size: cover;
  background: rgba(0, 0, 0, 0.3);
}

.login-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;

  img {
    position: relative;
    z-index: -1;
    border-radius: inherit;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

.box {
  width: 80%;

  .left {
    color: #fff;
    font-weight: 700;

    .title-left {
      font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial,
        sans-serif;
      font-size: 2.125rem;
      color: #fff;
      letter-spacing: 0.00735em;
      line-height: 2.5rem;
    }

    .text {
      margin-top: 8px;
      font-weight: 500;
      letter-spacing: 0.0125em;
      line-height: 2rem;
    }
  }

  .el-button--primary {
    color: #ffffff;
    background-color: #1976d2;
    border-color: #1976d2;

    &:hover {
      opacity: 0.85;
    }
  }

  .text-primary {
    font-size: 14px;
    color: #1976d2;
    text-align: center;
    margin-bottom: 4rem;
  }

  .el-form-item:nth-last-child(1) {
    margin-top: 43px;
    margin-bottom: 67px;
  }

  label:before {
    display: none;
  }

  .el-col {
    height: 100%;
  }
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;

  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}
</style>
